<template>
	<view class="address-management" :class="addressList.length < 1 && page > 1 ? 'on' : ''" ref="container">
		<view class="line" v-if="addressList.length > 0">
			<image src="https://h5.ylsp.vip/file/static/images/line.jpg" />
		</view>
		<view class="item" v-for="(item, addressListIndex) in addressList" :key="addressListIndex">
			<view class="address">
				<view class="consignee">
					收货人：{{ item.realName }}
					<text class="phone">{{ item.phone }}</text>
				</view>
				<view>
					收货地址：{{ item.province }}{{ item.city }}{{ item.district
          }}{{ item.detail }}
				</view>
			</view>
			<view class="operation acea-row row-between-wrapper">
				<view class="select-btn">
					<view class="checkbox-wrapper">
						<checkbox-group @change="radioChange(item.id)">
							<label class="well-check">
								<checkbox :value="item.isDefault==1?'checked':''"
									:checked="item.isDefault||item.isDefault=='1' ? true : false"></checkbox>
								<text class="default">设为默认</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="acea-row row-middle">
					<view @click="editAddress(addressListIndex)">
						<text class="iconfont icon-bianji"></text>编辑
					</view>
					<view @click="delAddress(addressListIndex)">
						<text class="iconfont icon-shanchu"></text>删除
					</view>
				</view>
			</view>
		</view>
		<Loading :loaded="loadend" :loading="loading"></Loading>
		<view class="noCommodity" v-if="addressList.length < 1 && page > 1">
			<view class="noPictrue">
				<image src="https://h5.ylsp.vip/file/static/images/noAddress.png" class="image" />
			</view>
		</view>
		<view style="height:100rpx;"></view>
		<view class="footer acea-row row-between-wrapper">
			<view class="addressBnt bg-color-black" v-if="isWechat" @click="addAddress">
				<text class="iconfont icon-tianjiadizhi"></text>添加新地址
			</view>
			<view class="addressBnt on bg-color-black" v-else @click="addAddress">
				<text class="iconfont icon-tianjiadizhi"></text>添加新地址
			</view>
		</view>
	</view>
</template>

<script type="text/babel">
	import {getAddressList, getAddressRemove, getAddressDefaultSet, postAddress} from "@/api/user";
	import Loading from "@/components/Loading";
	import { isWeixin } from "@/utils";
	export default {
	  components: {
		Loading
	  },
	  data() {
		return {
		  page: 1,
		  limit: 20,
		  addressList: [],
		  loadTitle: "",
		  loading: false,
		  loadend: false,
		  isWechat: isWeixin()
		};
	  },
	  mounted: function() {
		this.AddressList();
	  },
	  onReachBottom() {
		!this.loading && this.AddressList();
	  },
	  onShow: function() {
		this.refresh();
	  },
	  methods: {
		refresh: function() {
		  this.addressList = [];
		  this.page = 1;
		  this.loadend = false;
		  this.AddressList();
		},
		AddressList: function() {
		  let that = this;
		  if (that.loading) return;
		  if (that.loadend) return;
		  that.loading = true;
		  getAddressList({ page: that.page, limit: that.limit }).then(res => {
			that.loading = false;
			that.addressList.push.apply(that.addressList, res.data);
			that.loadend = res.data.length < that.limit;
			that.page = that.page + 1;
		  });
		},
		editAddress: function(index) {
		  this.$yrouter.push({
			path: "/pages/user/address/AddAddress/index",
			query: { id: this.addressList[index].id }
		  });
		},
		delAddress: function(index) {
		  let that = this;
		  let address = this.addressList[index];
		  let id = address.id;
		  getAddressRemove(id).then(function() {
			uni.showToast({
			  title: "删除成功!",
			  icon:"success",
			  duration: 2000,
			  complete: () => {
				that.addressList.splice(index, 1);
				that.$set(that, "addressList", that.addressList);
			  }
			});
		  });
		},
		radioChange: function(id) {
		  getAddressDefaultSet(id).then(res => {
			this.refresh();
			uni.showToast({ title: res.msg, icon: "none", duration: 2000 });
		  });
		},
		addAddress: function() {
		  this.$yrouter.push({
			path: "/pages/user/address/AddAddress/index"
		  });
		}
	  }
	};
</script>
<style scoped lang="less">
	.address-management.on {
		background-color: #fff;
		height: 100vh;
	}

	.bg-color-blue {
		background-color: #8196e6;
	}
</style>
